<template>
  <ContentLoader v-if="showContent" class="list-loader">
    <rect x="60" y="0" rx="3" ry="3" width="250" height="10" />
    <rect x="60" y="20" rx="3" ry="3" width="220" height="10" />
    <rect x="60" y="40" rx="3" ry="3" width="170" height="10" />
    <rect x="60" y="60" rx="3" ry="3" width="250" height="10" />
    <rect x="60" y="80" rx="3" ry="3" width="200" height="10" />
    <rect x="60" y="100" rx="3" ry="3" width="80" height="10" />
  </ContentLoader>
  <div v-else class="login-wrapper">
    <div class="logo-wrap">
      <div class="logo-container">
        <div aspectratio
            w-190-174
            class="img-wrap">
          <img aspectratio-content
              src="@/assets/logo.png"
              alt="logo">
        </div>
      </div>
      <div class="logo-desc">驴优客·吃喝玩乐全都“惠”</div>
    </div>
    <div class="form">
      <div class="username-container input-container"
          border-bottom-1px>
        <svg-icon icon-class="user"
                  class-name="custom-class"
                  class="login-icon" />
        <input v-model="username" type="text" name="name" placeholder="请输入帐号" autocomplete="off">
      </div>
      <div class="password-container input-container"
          border-bottom-1px>
        <svg-icon icon-class="password"
                  class-name="custom-class"
                  class="login-icon" />
        <input v-model="password" type="password" name="password" placeholder="请输入密码" autocomplete="off" @keyup.enter="handleSubmit">
      </div>
      <common-btn :desc="btnDesc" :logining="logining" @submit="handleSubmit" />
    </div>
  </div>
</template>

<script>
import CommonBtn from '@/components/CommonButton'
import { ContentLoader } from 'vue-content-loader'

export default {
  name: 'home',
  components: {
    CommonBtn,
    ContentLoader
  },
  data () {
    return {
      btnDesc: '登录',
      redirect: undefined,
      username: '',
      password: '',
      logining: false,
      showContent: true
    }
  },
  watch: {
    $route: {
      handler: function (route) {
        this.redirect = route.query && route.query.redirect
      },
      immediate: true
    }
  },
  mounted () {
    this.$nextTick(() => {
      this.showContent = false
    })
  },
  methods: {
    handleSubmit () {
      window.scrollTo(0, Math.max(document.body.clientHeight, document.documentElement.clientHeight))
      const flag = this.validity()
      if (flag) {
        const { username, password } = this
        this.logining = true
        this.$store.dispatch('user/login', { username, password })
          .then((res) => {
            this.logining = false
            this.$router.push({ path: this.redirect || '/' })
          })
      }
    },
    validity () {
      const { username, password } = this
      if (username.trim() === '') {
        this.$toast.fail({
          message: '用户名不能为空',
          duration: 1000
        })
        return false
      }
      if (password.trim() === '') {
        this.$toast.fail({
          message: '密码不能为空',
          duration: 1000
        })
        return false
      }
      return true
    }
  }
}
</script>

<style lang="stylus" scoped>
@import '~stylus/mixins.styl'
@import '~stylus/variable.styl'
.list-loader
  position absolute
  top 50%
  left 50%
  transform translate(-50%, -50%)
.login-wrapper
  initPosition()
  padding-top 166px
  padding-left 96px
  padding-right 96px
  box-sizing border-box
  background-color $common_bgc

  .logo-wrap
    width 100%

    .logo-container
      width 190px
      margin 0 auto

      .img-wrap
        margin-bottom 28px

    .logo-desc
      font-size $login_size
      color $login_font_color
      line-height 32px
      margin-bottom 116px
      text-align center

  .username-container
    margin-bottom 60px

  .password-container
    margin-bottom 88px

  .input-container
    width 100%
    height 68px
    display flex
    align-items center

    .login-icon
      width 26px
      height 32px
      margin-right 34px

    input
      flex 1
      font-size $login_size
      color $login_font_color
      height 100%
      border none
      padding-right 10px
      box-sizing border-box
      background-color $common_bgc
</style>
